<template>
  <a-modal :open="props.open" :footer="null" width="468px" wrap-class-name="params-modal" :closable="false" destroy-on-close>
    <div class="model-body">
      <div class="info-wrap">
        <div class="info-header">
          <div class="title">生成参数</div>
          <div class="title cancel" @click="cancel"><div class="iconfont icon-close-line"></div></div>
        </div>
        <div class="info-body-wrap my-scrollbar">
          <div class="info-body">
            <info-module v-if="modelList?.length" class="w-[100%]" label="模型">
              <div class="model-list">
                <g-model-line v-for="item in modelList" :key="item.name" :model="item" />
              </div>
            </info-module>
            <info-module class="w-[100%]" label="提示词" :value="props.detailInfo?.prompt" has-copy :elliptical="999" />
            <info-module class="w-[100%]" label="负向提示词" :value="props.detailInfo?.negativePrompt" has-copy :elliptical="999" />
            <info-module class="w-[47%]" label="模型的VAE" :value="props.detailInfo?.overrideSettings?.sdVae" />
            <info-module class="w-[47%]" label="CLIP 终止层数" :value="props.detailInfo?.overrideSettings?.clipStopAtLastLayers" />
            <info-module class="w-[47%]" label="图片大小" :value="`${detailInfo?.width || 0}x${detailInfo?.height || 0}`" />
            <info-module class="w-[47%]" label="采样器" :value="props.detailInfo?.samplerName" />
            <info-module class="w-[47%]" label="调度类型" :value="props.detailInfo?.scheduler" />
            <info-module class="w-[47%]" label="采样步数" :value="props.detailInfo?.steps" />
            <info-module class="w-[47%]" label="提示词引导系数（CFG Scale）" :value="props.detailInfo?.cfgScale" />
            <info-module class="w-[47%]" label="生成次数" :value="props.detailInfo?.nIter" />
            <info-module class="w-[47%]" label="每次数量" :value="props.detailInfo?.batchSize" />
            <info-module class="w-[47%]" label="随机种子" :value="props.detailInfo?.seed" />
            <template v-if="detailInfo?.enableHr">
              <info-module v-if="detailInfo?.hrScale" class="w-[47%]" label="放大倍率" :value="`${detailInfo?.hrScale}`" />
              <info-module class="w-[47%]" label="高清放大算法" :value="props.detailInfo?.hrUpscaler" />
              <info-module class="w-[47%]" label="重绘强度" :value="props.detailInfo?.denoisingStrength" />
            </template>

            <!-- <info-module class="w-[47%]" label="高清修复采样步数" :value="props.detailInfo?.hrSecondPassSteps" /> -->
            <!-- <info-module class="w-[47%]" label="动画模型" value="mm_sd_v15_v2.ckpt" />
          	<info-module class="w-[47%]" label="保存格式" value="GIF" /> -->
            <info-module class="w-[47%]" label="总帧数" :value="props.detailInfo?.animateDiff?.args?.[0]?.videoLength" />
            <info-module class="w-[47%]" label="帧率" :value="props.detailInfo?.animateDiff?.args?.[0]?.fps" />
            <!-- <info-module class="w-[47%]" label="显示循环数量" :value="1" />
						<info-module class="w-[47%]" label="闭环" value="R+P" />
						<info-module class="w-[47%]" label="上下文单批数量" :value="16" />
						<info-module class="w-[47%]" label="步幅" :value="1" />
						<info-module class="w-[47%]" label="重叠" :value="-1" /> -->
            <template v-if="!detailInfo?.enableHr && (detailInfo?.mode === 0 || detailInfo?.mode === 2)">
              <info-module class="w-[47%]" label="缩放模式" :value="resizeMode" />
              <info-module class="w-[47%]" label="重绘强度" :value="props.detailInfo?.denoisingStrength" />
            </template>

            <template v-if="detailInfo?.mode === 2">
              <info-module class="w-[47%]" label="蒙版模糊度" :value="props.detailInfo?.maskBlur" />
              <!-- <info-module class="w-[47%]" label="蒙版模式" :value="inpaintMaskInvert" /> -->
              <info-module class="w-[47%]" label="蒙版蒙住的内容" :value="inpaintingFill" />
              <info-module class="w-[47%]" label="绘制区域" :value="inpaintFullRes" />
              <info-module class="w-[47%]" label="仅蒙版绘制参考半径(像素)" :value="props.detailInfo?.inpaintFullResPadding" />
            </template>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, PropType } from 'vue'

  import GModelLine from '@/components/GModelLine/index.vue'

  import { drawRegionOptions, maskFillOptions, zoomModeOptions } from '../../options/index'
  import { BaseModeldto, DetailInfo, ModelList } from '../../types/index'
  import InfoModule from '../info-module/index.vue'

  const props = defineProps({
    open: {
      type: Boolean,
      default: false
    },
    detailInfo: {
      type: Object as PropType<DetailInfo>
    },
    modelList: {
      type: Object as PropType<ModelList[]>
    }
  })

  // const props.detailInfo = ref<any>({})
  const emits = defineEmits<{ (e: 'cancel'): void }>()
  const resizeMode = computed(() => {
    return zoomModeOptions.find(item => item.value === props.detailInfo?.resizeMode)?.label
  })

  const inpaintingFill = computed(() => {
    return maskFillOptions.find(item => item.value === props.detailInfo?.inpaintingFill)?.label
  })

  const inpaintFullRes = computed(() => {
    return drawRegionOptions.find(item => item.value === props.detailInfo?.inpaintFullRes)?.label
  })

  const cancel = () => {
    emits('cancel')
  }
</script>

<style lang="less">
  .params-modal {
    .ant-modal-content {
      padding: 0;
      max-height: 800px;
      background-color: #fff;

      .ant-modal-body {
        padding: 0;
        margin: 0;
      }
    }
  }
</style>

<style lang="less" scoped>
  .model-body {
    display: flex;
    width: 468px;

    .big-img-wrap {
      position: relative;
      overflow: hidden;
      width: 1000px;
      max-height: 800px;

      .under-bg-img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: lightgray 50% / cover no-repeat;
        filter: blur(35px);
      }

      .big-img {
        position: relative;
        object-fit: contain;
        z-index: 5;
        width: 100%;
        height: 100%;
      }
    }

    .info-wrap {
      display: flex;
      width: 468px;
      max-height: 800px;
      background: #fff;
      flex-direction: column;

      .info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        width: 468px;

        .title {
          font-size: 18px;
          color: rgba(16, 16, 20, 0.95);
          font-style: normal;
          font-weight: 700;
          line-height: 26px;
        }

        .cancel {
          cursor: pointer;
        }
      }

      .info-body-wrap {
        overflow-y: auto;
        min-height: 0;
        max-height: 100%;
        background: #fff;
        flex: 1;
      }

      .info-body {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        flex-wrap: wrap;
        gap: 20px;

        .model-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
      }

      .info-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        gap: 12px;

        .shu {
          width: 0;
          height: 20px;
          flex-shrink: 0;
        }
      }
    }
  }
</style>
